<template>
  <el-dialog width="780px" :title="title" :visible.sync="visible">
    <el-form ref="form" :rules="rules" :model="model" :disabled="disableSubmit" label-width="160px" v-loading="loading">
      <el-form-item prop="name" label="盘点单名称">
        <el-input placeholder="请输入盘点单名称" v-model="model.name"></el-input>
      </el-form-item>
      <el-form-item prop="headPersonnel" label="负责人">
        <el-input placeholder="请输入负责人" v-model="model.headPersonnel"></el-input>
      </el-form-item>
      <el-form-item label="计划盘点时间" required>
        <el-col :span="6">
          <el-form-item prop="startDate">
            <el-date-picker
              type="date"
              value-format="yyyy-MM-dd"
              placeholder="开始时间"
              v-model="model.startDate"
              style="width: 100%;"
            ></el-date-picker>
          </el-form-item>
        </el-col>
        <el-col align="center" class="line" :span="1">~</el-col>
        <el-col :span="6">
          <el-form-item prop="endDate">
            <el-date-picker
              type="date"
              value-format="yyyy-MM-dd"
              placeholder="结束时间"
              v-model="model.endDate"
              style="width: 100%;"
            ></el-date-picker>
          </el-form-item>
        </el-col>
      </el-form-item>

      <el-form-item prop="note" label="备注">
        <el-input type="textarea" :rows="2" placeholder="请输入内容" v-model="model.note"></el-input>
      </el-form-item>

      <el-tabs value="first">
        <el-tab-pane label="盘点范围（可选）" name="first"></el-tab-pane>
      </el-tabs>
      <el-form-item prop="companyId" label="领用公司">
        <select-company  v-model="model.scopeCompanyId"></select-company>
      </el-form-item>
      <el-form-item prop="scopeContractNamber" label="合同编号">
        <el-input placeholder="请输入合同编号" v-model="model.scopeContractNamber"></el-input>
      </el-form-item>
      <el-form-item label="资产位置">
        <el-col :span="7">
          <el-form-item prop="locationBuilding">
            <dict-select-tag
              v-model="model.locationBuilding"
              placeholder="请选择建筑"
              :triggerChange="true"
              dictCode="building"
            />
          </el-form-item>
        </el-col>
        <el-col :span="7">
          <el-form-item prop="locationFloor">
            <el-input-number style="width: 145px;"  controls-position="right"  :step="1" placeholder="请输入楼层" v-model="model.locationFloor"></el-input-number>
          </el-form-item>
        </el-col>
      </el-form-item>
    </el-form>
    <div v-if="!disableSubmit" slot="footer" class="dialog-footer">
      <el-button @click="handleCancel">取 消</el-button>
      <el-button type="primary" @click="handleSubmit">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
import Vue from "vue";
import { MessageBox, Message, Notification } from "element-ui";
import ImageUpload from "@/components/ImageUpload";
import { ACCESS_TOKEN } from "@/store/mutation-types";
import { getAction, deleteAction, putAction, postAction } from "@/api/manage";
import SelectCompany from "@/components/SelectCompany";

export default {
  name: "checkAdd",
  components: { ImageUpload, SelectCompany },
  data() {
    return {
      title: "新增盘点",
      visible: false,
      loading: false,
      multipleSelection: [],
      disableSubmit: false,
      model: {},
      url: {}, // 新增资产表单验证
      rules: {
        name: [
          { required: true, message: "请输入盘点单名称", trigger: "change" }
        ],
        headPersonnel: [
          { required: true, message: "请输入负责人", trigger: "blur" }
        ],
        startDate: [
          { required: true, message: "请选择计划开始时间", trigger: "blur" }
        ],
        endDate: [
          { required: true, message: "请选择计划结束时间", trigger: "blur" }
        ]
      }
    };
  },
  created() {
    const token = Vue.ls.get(ACCESS_TOKEN);
    this.headers = { "X-Access-Token": token };
  },
  methods: {
    refresh() {},
    add() {
      this.refresh();
      this.edit({});
    },
    edit(record) {
      // this.resetScreenSize(); // 调用此方法,根据屏幕宽度自适应调整抽屉的宽度
      let that = this;
      if (that.$refs.form) {
        that.$refs.form.resetFields();
      }
      that.model = Object.assign({}, record);
      //that.form.setFieldsValue(pick(this.model,'username','sex','realname','email','phone','activitiSync','workNo','telephone','post'))
      this.visible = true;
      this.disableSubmit = false;
    },

    handleSubmit() {
      const that = this;
      this.$refs.form.validate(valid => {
        if (valid) {
          this.loading = true;
          let promise;
          promise = postAction("/inventory/add", Object.assign({}, this.model));
          promise
            .then(res => {
              if (res.success) {
                this.$message.success(res.message);
                that.$emit("ok");
                that.close();
              } else {
                this.$message.warning(res.message);
              }
            })
            .finally(() => {
              this.loading = false;
            });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    handleCancel() {
      this.close();
    },
    close() {
      this.$emit("close");
      this.visible = false;
    }
  }
};
</script>

<style scoped>
</style>
